<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <style>
        #code_box {
            width: 160px;
            height: 58px;
            background-color: #f40;
            line-height: 36px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            -webkit-user-select: none; /*禁止用户选中文字*/
        }
    </style>

    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../css/register.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/login.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- 引入样式eleme -->
    <link rel="stylesheet" href="../angularjs/index.css">
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
</head>
<body>
<div id="app">



    <!--注册-->
    <div class="wrap">

        <div class="tdbModule loginPage">
            <div class="registerTitle">用户登录</div>
            <div class="registerCont">

                <el-form :model="user" ref="user" label-width="100px" class="demo-ruleForm">
                    <!--用户名-->
                    <el-form-item
                            label="用户名"
                            prop="phone"
                            :rules="[
                              { required: true, message: '用户名不能为空'}
                                 ]"
                    >

                        <el-input type="phone" v-model="user.phone" autocomplete="off"
                                  style="width: 30%" placeholder="请输入手机号或邮箱"></el-input>
                    </el-form-item>

                    <el-form-item
                            label="密码"
                            prop="password"
                            :rules="[
                          { required: true, message: '密码不能为空'}
                          ]"
                    >
                        <el-input type="password" v-model="user.password" autocomplete="off"
                                  style="width: 30%" placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item
                            label="验证码"
                            prop="yzm"
                            :rules="[
                          { required: true, message: '验证码不能为空'}
                          ]"
                    >
                        <el-input type="yzm" v-model="user.yzm" autocomplete="off"
                                  style="width: 30%" placeholder="请输入验证码"></el-input>
                        <span id="code_box" v-on:click="createYzm()" style="font-size: 28px">{{yzm}}</span>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="submitForm('user')">登录</el-button>
                        <el-button type="success" @click="admin1()">员工登录</el-button>
                        <el-button @click="resetForm('user')">重置</el-button>
                    </el-form-item>
                </el-form>


            </div>
        </div>

    </div>
</div>


</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            user: {},
            Result: {},
            yzm: null,
            uyzm: null
        },
        methods: {
            createYzm: function () {

                // 获得验证码
                var code = "";
                var codeLength = 4;//验证码的长度
                var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g',
                    'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');//随机数
                for (let i = 0; i < 4; i++) {//循环操作
                    var index = Math.floor(Math.random() * 36);//取得随机数的				索引（0~35）
                    code += random[index];//根据索引取得随机数加到code上
                }
                vue.yzm = code

            },
            //点击切换验证
            open() {
                this.$message.error(vue.Result.msg + ":" + vue.Result.data);
            }, open2() {
                this.$message({
                    message: '登陆成功',
                    type: 'success'
                });
            },

            submitForm(formName) {
                //用户名以及密码不能为空
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //登录
                        if (vue.user.yzm == vue.yzm) {
                            // axios.post("http://127.0.0.1:9099/user/login", vue.user).then(function (response) {
                            axios.post("http://127.0.0.1:10088/user/login", vue.user).then(function (response) {
                                vue.Result = response.data;
                                if (vue.Result.code == 200) {
                                    //登录成功
                                    vue.open2();
                                    localStorage.setItem("token", vue.Result.token)
                                    console.log(vue.Result.data);
                                    localStorage.setItem("phone", vue.Result.data)
                                    setInterval(() => {
                                        location.href = "个人中心首页.html";
                                    }, 1000);
                                } else {
                                    //密码错误提示信息
                                    vue.open();
                                }
                            });
                        } else {
                            vue.Result.data = "验证码错误";
                            vue.Result.msg = "登录失败";
                            vue.open();
                        }
                    } else {
                        return false;
                    }
                });

            },
            //重置
            resetForm(formName) {
                //重置
                this.$refs[formName].resetFields();
            },
            admin1: function () {
                location.href = "../admin/login.html";
            }
        },


    });

    vue.createYzm();
</script>
</html>
